<script setup>
import { onMounted, ref } from "vue";
import PasswordInput from "./PasswordInput.vue";
import PerSelect from "./PerSelect.vue";
import imagePTipImage from "@/assets/images/imagePTip.png";
import UploadImg from "@/components/UploadImg/index.vue";
const emit = defineEmits(["confirm", "upload", "perChange", "inputChange"]);
const props = defineProps({
  // form数组
  formList: {
    type: Array,
    default: () => [],
  },
  // 是否横向
  isInline: {
    type: Boolean,
    default: false,
  },
  // lable宽度
  labelWidth: {
    type: String,
    default: "120px",
  },
  // 校验
  formRules: {
    type: Object,
    default: () => {},
  },
  // 校验时的icon
  statusIcon: {
    type: Boolean,
    default: false,
  },
  // 自定义样式
  isCustomizeClass: {
    type: String,
    default: "",
  },
});
const formModel = ref({});
const elFormRef = ref();
const showPerSelect = ref(false);
onMounted(() => {
  initForm();
});
// 初始化form
const initForm = () => {
  formModel.value = {};
  props.formList.forEach((e) => {
    if (e.type == "input" || e.type == "textarea") {
      formModel.value[e.key] = "";
    } else {
      formModel.value[e.key] = void 0;
    }
  });
  setPerForm();
};

// 提交表单
const submitForm = async () => {
  return new Promise((resolve) => {
    elFormRef.value.validate((valid, fields) => {
      if (valid) {
        resolve({ state: true, data: formModel.value });
      } else {
        resolve({ state: false, data: fields });
      }
    });
  });
};
// 赋值form
const setForm = (data) => {
  for (const key in formModel.value) {
    if (Object.hasOwnProperty.call(formModel.value, key)) {
      formModel.value[key] = data[key];
    }
  }
  setPerForm(data);
};

// 赋值数据权限
const setPerForm = (data = void 0) => {
  showPerSelect.value = false;
  props.formList.forEach((e) => {
    if (e.type == "perSelect") {
      formModel.value[e.key] = {};
      if (data) {
        formModel.value[e.key][e.config.first.key] = data[e.config.first.key];
        formModel.value[e.key][e.config.second.key] = data[e.config.second.key];
        formModel.value[e.key][e.config.thrid.key] = data[e.config.thrid.key];
      }
    }
  });
  showPerSelect.value = true;
};

// 数据权限回调
const perSelectChange = (data, key) => {
  props.formList.forEach((e) => {
    if (e.type == "perSelect") {
      if (!formModel.value[e.key]) {
        formModel.value[e.key] = {};
      }
      if (formModel.value[e.key][key]?.length) {
        formModel.value[e.key][key] = data;
      } else {
        formModel.value[e.key][key] = [];
        formModel.value[e.key][key] = data;
      }
    }
  });
  emit("perChange");
};
const showClickFun = () => {
  emit("confirm");
};
const showImage = ref("");
const handleMouseover = (e, src) => {
  showImage.value = src + e;
};
const handleMouseout = () => {
  showImage.value = "";
};
// 图片上传回调
const backValueActivityImg = (img) => {
  emit("upload", img);
};
const inputFun = (e, key) => {
  emit("inputChange", { value: e, key });
};
defineExpose({ initForm, formModel, submitForm, setForm });
</script>
<template>
  <el-form
    ref="elFormRef"
    class="elformStyle"
    :class="isCustomizeClass"
    v-if="formList.length"
    :model="formModel"
    :inline="isInline"
    :rules="formRules"
    :label-width="labelWidth"
    :status-icon="statusIcon"
  >
    <slot name="otherSlot"></slot>
    <el-form-item
      v-for="item in formList"
      :label="item.label"
      :key="item.key"
      :prop="item.key"
      :label-width="item.labelWidth"
    >
      <!-- 组件 start -->
      <div
        v-if="item.type == 'text'"
        :style="
          item.style ||
          ' color: #222222; font-size: 14px; font-weight: 500; line-height:normal;height:auto'
        "
      >
        {{ formModel[item.key] || "-" }}
      </div>

      <div v-if="item.type == 'image'" class="flex align-items-center flex-warp" style="gap: 16px;line-height:normal">
        <div v-if="!item.list?.length">-</div>
        <template v-else
          ><div
            v-for="(url, index) in item.list"
            :key="index"
            :style="item.boxStyle"
            class="relative"
          >
            <el-image
              class="images"
              :src="url.src"
              lazy
              :style="item.imageStyle"
              fit="cover"
              hide-on-click-modal
              preview-teleported
              :initial-index="url.initial"
              :preview-src-list="item.srcList"
              @mouseover="handleMouseover(item.key, url.src)"
              @mouseout="handleMouseout"
            />
            <img
              v-if="showImage == url.src + item.key"
              class="imagePTip"
              style="width: 24px; height: 24px"
              :src="imagePTipImage"
              @mouseover="handleMouseover(item.key, url.src)"
              @mouseout="handleMouseout"
            /></div
        ></template>
      </div>

      <el-input
        v-if="item.type == 'input'"
        v-model="formModel[item.key]"
        :placeholder="item.placeholder || '请输入'"
        :clearable="item.clearable"
        :disabled="item.disabled"
        :style="'width:' + item.width"
        :maxlength="item.maxlength"
        :show-word-limit="item.showlimit"
        @input="inputFun($event, item.key)"
      />
      <el-input
        v-if="item.type == 'textarea'"
        v-model="formModel[item.key]"
        :autosize="{ minRows: item.minRows || 2, maxRows: item.maxRows || 4 }"
        type="textarea"
        :disabled="item.disabled"
        :style="'width:' + item.width"
        :maxlength="item.maxlength"
        :placeholder="item.placeholder || '请输入'"
      />
      <PasswordInput
        v-if="item.type == 'password'"
        v-model="formModel[item.key]"
        :placeholder="item.placeholder"
        :style="'width:' + item.width"
      ></PasswordInput>

      <el-select
        v-if="item.type == 'select'"
        v-model="formModel[item.key]"
        :placeholder="item.placeholder || '请选择'"
        :clearable="item.clearable"
        v-selectClose
        :multiple="item.multiple"
        :disabled="item.disabled"
        :loading="item.loading"
        :remote="item.remote"
        :style="'width:' + item.width"
      >
        <el-option
          v-for="op in item.list"
          :key="op.value"
          :label="op.label"
          :value="op.value"
        />
      </el-select>
      <el-cascader
        v-if="item.type == 'cascader'"
        :options="item.options"
        :disabled="item.disabled"
        :style="'width:' + item.width"
        collapse-tags
        :collapse-tags-tooltip="!item.tagsTooltip"
        v-model="formModel[item.key]"
        :props="item.props"
        :placeholder="item.placeholder || '请选择'"
        :clearable="item.clearable"
      />
      <el-date-picker
        v-if="item.type == 'datetime'"
        v-model="formModel[item.key]"
        type="datetime"
        :placeholder="item.placeholder || '请选择'"
        :disabled="item.disabled"
        :value-format="item.valueFormat || 'YYYY-MM-DD'"
      />

      <el-date-picker
        v-if="item.type == 'daterange'"
        v-model="formModel[item.key]"
        :style="'width:' + (item.width || '380px')"
        type="daterange"
        range-separator="~"
        :clearable="item.clearable"
        :format="item.format || 'YYYY-MM-DD HH:mm'"
        :start-placeholder="item.startTxt || '开始时间'"
        :end-placeholder="item.endTxt || '结束时间'"
      />
      <div v-if="item.type == 'upload'" :style="'width:' + item.width">
        <UploadImg
          :multiple="!!item.multiple"
          :styles="item.style"
          @backValue="backValueActivityImg"
          :imageListUrlInfo="formModel[item.key]"
        >
        </UploadImg>
        <div :style="item.tipStyle">{{ item.tip }}</div>
      </div>

      <div v-if="item.type == 'perSelect'" :style="'width:' + item.width">
        <div v-if="item.show" class="perSelectContent">
          当前共包含{{ item.storeCount || 0 }}家门店
          <span class="showBtn" @click="showClickFun">查看</span>
        </div>
        <div class="flex" v-if="showPerSelect" v-loading="item.loading">
          <PerSelect
            :mianHeight="item.mianHeight"
            class="mr15"
            :titleName="item.config.first.name"
            :activeList="formModel[item.key][item.config.first.key]"
            :list="item.config.first.List"
            @change="perSelectChange($event, item.config.first.key)"
          >
          </PerSelect>
          <PerSelect
            :mianHeight="item.mianHeight"
            :titleName="item.config.second.name"
            class="mr15"
            :activeList="formModel[item.key][item.config.second.key]"
            :list="item.config.second.List"
            @change="perSelectChange($event, item.config.second.key)"
          >
          </PerSelect>
          <PerSelect
            :mianHeight="item.mianHeight"
            :titleName="item.config.thrid.name"
            :activeList="formModel[item.key][item.config.thrid.key]"
            :list="item.config.thrid.List"
            @change="perSelectChange($event, item.config.thrid.key)"
          >
          </PerSelect>
        </div>
        <div class="perSelectTip">
          指定数据的权限范围后，后续新增的商户/门店只要同时满足以下数据维度，对应角色将能查看/操作以下数据
        </div>
      </div>

      <!-- 组件 end -->
      <slot name="otherFormItem" v-if="item.otherFormItem"></slot>
      <slot
        :name="item.other"
        v-if="item.other"
        :form="formModel[item.key]"
      ></slot>
    </el-form-item>
  </el-form>
</template>

<style lang="less" scoped>
.elformStyle {
  :deep(.el-form-item) {
    margin-right: 0;
    margin-bottom: 16px;
  }
  :deep(.el-form-item__label) {
    color: #222222;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
  }
}
.noHeightelformStyle {
  :deep(.el-form-item) {
    margin-right: 0;
    margin-bottom: 16px;
  }
  :deep(.el-form-item__label) {
    color: #222222;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    height: auto;
    padding: 0 4px 0 0;
  }
}

.perSelectTip {
  color: #666666;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  margin-top: 16px;
}
.perSelectContent {
  color: #222222;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  margin-bottom: 7px;
  & .showBtn {
    margin-left: 20px;
    color: #3480ff;
    cursor: pointer;
  }
}

.images {
  cursor: pointer;
  position: relative;
  height: 100%;
  width: 100%;
}

.imagePTip {
  position: absolute;
  cursor: pointer;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
